import React, {useState, useEffect,memo } from "react";
import {useNavigate,useLocation} from 'react-router-dom'
import {connect} from 'react-redux'
import {Container} from './DetailStyle'
import Scroll from "../../baseUI/scroll";
import * as api from '../../api'
import * as actionTypes from '../shopping/store/actionCreators'
import HeadNumIcon from '../../common/headNumIcon/HeadNumIcon'
import main from '../../assets/images/首页.png'
import shopping from '../../assets/images/购物车.png'



const Detail = (props) => {
  
  
  const {setAddCar,selectGoods} = props

  const navigate = useNavigate()
  const [detailList, setDetailList] = useState([])
  const location = useLocation()
  const id = location.pathname.replace(/[^0-9]/ig, "")

  useEffect(() => {
    api.reqDetail()
			.then((res) => {
				setDetailList(res.data.data.detailList)
			})
      
  }, [])
  
  // 通过id 匹配对应数据的索引
  const index = detailList.findIndex((item) => item.id == id)

  const onScroll = () => {
    console.log('=====');
  }

  // 执行点击跳转路由到首页
  const gotoMain = () => {
    navigate('/home/main')
  }
  const gotoShopping = () => {
    navigate('/home/shopping')
  }

  const countAmount = () => {
    let subCount = 0
    selectGoods.map((item) => {
      subCount = subCount + item.count
    })
    return subCount
  }

  return (
    <Container>
      <div className="detail">
        <Scroll bounceTop={false} bounceBottom={false} 
        onScroll={
          (e) => {
            console.log(e.y);
          }
        }>
          {
            detailList.length ?  (<div>
              <div className="swiperImg" >
                <img src={detailList[index].imgUrl2} alt="" />
              </div>
              <div className="text">
                <div className="price"> ￥{detailList[index].price}</div>
                <div className="title">{detailList[index].name}</div>
                <div className="text1">{detailList[index].text1}</div>
                <div className="text1">{detailList[index].text2}</div>
                <div className="text1">{detailList[index].text3}</div>
              </div>
              <div className="swiperImg">
                <img src={detailList[index].mapping} alt="" />
              </div>
            </div>) : (<div>55555</div>)
          }
        </Scroll>
      </div>
      <div className="footerbar">
          <div className="icon" onClick={gotoMain}>
            <img src={main} alt="" />
            <div>首页</div>
          </div>
          <div className="icon" onClick={gotoShopping}>
            <img src={shopping} alt="" />
            <HeadNumIcon top="92vh" left="22vw" num={countAmount()}/>
            <div>购物车</div>
          </div>
          <div className="button">
            <div className="button1" onClick={setAddCar.bind(null,detailList[index],selectGoods)}>加入购物车</div>
            <div className="button2">立即购买</div>
          </div>
      </div>
    </Container>
  )
}

const mapStateToPorps = (state) => {
	return {
    selectGoods: state.shopping.selectGoods
	}
}

const mapStateToDispatch = (dispatch) => {
	return {
    // 定义，onClick点击使用
    setAddCar(data,selectGoods){
      if (selectGoods.findIndex((item) => data.id == item.id) == -1) {
        dispatch(actionTypes.getSelectGoods(data)) 
      }else {
        let index = selectGoods.findIndex((item) => data.id == item.id)
        dispatch(actionTypes.getSelectGoodsCount(data, index))
      }
       
    }
	}
}

export default connect(mapStateToPorps, mapStateToDispatch)(memo(Detail))